<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 300vh;
        }
        .test{
            width: 100%;
            height: 50vh;
            background: rgb(29, 123, 173);
            position: sticky;
            top: 0vh;
            
        }
        .page1{
            height: 600vh;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            /* width: 96vw; */
            position: relative;
            background: #C0BEB5;
        }
        .page2,.page3{
            height: 150vh;
            background: rgb(99, 79, 79,0.2);
        }
    </style>



    <style>
        .test {
            margin: auto;
            /* width: 400px; */
            height: 100vh;
            /* line-height: 300px; */
            text-align: center;
            font-size: 180px;
            font-weight: bold;
            color: deeppink;
            background: url(../../three/skyboxsun25deg/test.jpg) no-repeat center center;
            background-size: cover;
            /* 1.圆形整体切割 */
            /* clip-path: circle(10%); */
            /* 2.可以调整的圆：第一个是宽，第二个是高，第三个是x轴，第四个是y轴 */
            /* clip-path: ellipse(100px 100px at 30% 40%); */
            /* clip-path:polygon(49% 0, 0% 80%, 100% 80%); */
            /* clip-path: url(#svgItem) */
        }
        .clipImg{
    width: 200px;
    
}
        </style>
   
</head>
<body>
   
    <div class="page2">
        
        <div class="list">
            


        </div>
    </div>
    <div class="page1">
     
        <div class="test">
            1

        </div>
    </div>
    <div class="page3">

    </div>

    <script>
       
        let element = document.querySelector(".test")
         // 给一个最外层的容器
        let parentElement = document.querySelector(".page1")
        let elementDistance = parentElement.offsetTop
        window.addEventListener("scroll",()=>{
            // 这里是用户的距离
            let scrollDistance = document.documentElement.clientHeight+document.documentElement.scrollTop
            // console.log(beyondRadio)
            if(scrollDistance>elementDistance && scrollDistance<elementDistance+parentElement.offsetHeight ){
                radio = (scrollDistance-elementDistance)/parentElement.offsetHeight
                // console.log(radio)
                console.log(radio)
                element.style.clipPath =`circle(${radio * 100}% at 30% 40%)`
                // element.currentTime = radio * allTime
            }
           
        })
       
    </script>
</body>
</html>